<template>
  <div
    class="active_cont"
    :style="{ '--theme_color': theme_color, '--btn_color': btn_color }"
  >
    <music-play
      v-if="activityItem.music"
      :activityItem="activityItem"
    ></music-play>

    <div id="app">
      <div class="activyshow_data">
        <div>
          <van-icon name="eye-o" class="icon_btn" />
          <span>{{ activityItem.browse_num || 0 }}</span>
        </div>
        <div>
          <van-icon name="friends-o" class="icon_btn" />
          <span>{{ join_num || 0.0 }}</span>
        </div>
        <div>
          <van-icon name="ellipsis" class="icon_btn" />
          <span>{{ draw || 0.0 }}</span>
        </div>
      </div>
      <img class="imgFirst" :src="activityItem.drawImg" alt="" />
      <div class="app">
        <div class="up">
          <!-- <div class="title">{{ activityItem.merchantname }}</div> -->
          <!-- <div class="text">
        <span>{{ activityItem.browse_num || 0 }}人已关注</span>
        <span class="shu">|</span>
        <span>{{ join_num || 0.0 }}人已参与</span>
        <span class="shu">|</span>
        <span>剩余{{ draw || 0.0 }}次</span>
      </div> -->
          <!-- <div class="times" style="color: #f6f690">
        <span>活动倒计时</span>
        <span>{{ dd }}</span
        >天 <span>{{ hh }}</span
        >小时 <span>{{ mm }}</span
        >分 <span>{{ ss }}</span
        >秒
      </div> -->
          <!-- <div class="number_of">抽奖数剩余 {{draw}} 次</div> -->
        </div>
        <div
          class="lottery"
          :style="{ 'background-image': 'url(' + imgs + ')' }"
        >
          <div class="lottery-item">
            <div class="lottery-start">
              <div class="box gray" v-if="isStart === 0">
                <p>活动未开始</p>
              </div>
              <div class="box" @click="startLottery" v-if="isStart === 1">
                <div></div>
              </div>
              <div class="box gray" v-if="isStart === 2">
                <p>活动过期</p>
              </div>
            </div>
            <ul>
              <li
                v-for="(item, i) in prizeList"
                :class="i == index ? 'on' : ''"
              >
                <div class="box">
                  <div><img :src="item.picture" alt="" /></div>
                  <div class="name">
                    <span>{{ item.name }}</span>
                  </div>
                </div>
              </li>
            </ul>
            <!-- <div class="btn_pop">
          <button @click="shareBtn" class="release_btn1">邀请好友来帮忙</button>
        </div> -->
          </div>
        </div>
      </div>

      <!-- 奖品列表 -->
      <van-popup
        class="vanPopup"
        v-if="showGift"
        v-model="showGift"
        position="bottom"
        :style="{ height: '60%' }"
        round
      >
        <div class="gift_pop">
          <span
            class="close-icon"
            :style="{ backgroundColor: btn_color }"
            @click="showGift = false"
            ><van-icon color="white" name="cross"
          /></span>
          <div style="padding: 0 15px; width: 100%">
            <infor-prize
              :activityItem="activityItem"
              :openid="openid"
              :prizeLists="prizeLists"
            ></infor-prize>
          </div>
        </div>
      </van-popup>

      <!-- 助力排行 -->
      <!-- <van-popup
        class="vanPopup"
        v-if="showHlep"
        v-model="showHlep"
        position="bottom"
        :style="{ height: '60%' }"
        round
      >
        <div class="gift_pop">
          <span
            class="close-icon"
            :style="{ backgroundColor: btn_color }"
            @click="showHlep = false"
            ><van-icon color="white" name="cross"
          /></span>
          <div style="padding: 0 15px; width: 100%">
            
          </div>
        </div> -->
      <!-- </van-popup> -->

      <div class="fix-bottom padding-lr dwon_btn">
        <!-- <van-button
          size="normal"
          v-if="activityItem.act_release == 1"
          @click="releaseClick"
          class="release_btn1"
          block
          >创建活动</van-button
        > -->
        <van-button
          size="normal"
          v-if="activityItem.act_release == 1"
          @click="shareBtn1"
          class="release_btn1"
          block
          >{{
            activityItem.status == 1 ? "邀请好友来帮忙" : "活动结束"
          }}</van-button
        >
      </div>

      <!-- 分享 -->
      <van-popup v-model="showPop" position="bottom" round>
        <div class="show">
          <span
            class="close-icon"
            :style="{ backgroundColor: btn_color }"
            @click="showPop = false"
            ><van-icon color="white" name="cross"
          /></span>
          <!-- 海报html元素 -->
          <div id="posterHtml" class="posterHtml">
            <img id="coverImg" :src="copyimg" />
            <!-- <div id="imgBox"></div> -->
            <div class="content">
              <div class="desc">
                <div class="line1">
                  <span>快来参加</span>
                  <van-icon class="margL-m" name="fire" :color="btn_color" />
                </div>
                <div class="line2">{{ activityItem.title }}</div>
              </div>
              <!-- 二维码 -->
              <!-- <div class="qrcode" id="qrcode" ref="qrcode"></div> -->
              <canvas class="qrcode" id="qrCode-canvas"></canvas>
            </div>
            <div class="margT-l bottom-box">
              <div class="fs-16 t-bold">{{ activityItem.merchantname }}</div>
              <div style="margin-top: 10px" class="color-m margT-m">
                本次活动{{ activityItem.end_time }}结束
              </div>
            </div>
          </div>
          <div class="padding-lr">
            <van-button
              :color="btn_color"
              block
              @click="createPoster"
              :loading="createLoading"
              >生成海报</van-button
            >
          </div>
        </div>
      </van-popup>
      <div class="imgBox" v-if="showImgPop">
        <img :src="createImg" />
        <div class="tips margT-m fs-16">Tips:长按以上海报即可保存或转发</div>
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="showImgPop = false"
          ><van-icon color="white" name="cross"
        /></span>
      </div>

      <!-- 中奖弹窗 -->
      <div class="mask" v-if="showToast"></div>
      <div class="lottery-alert" v-if="showToast">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="btnClick"
          ><van-icon color="white" name="cross"
        /></span>
        <h1 v-if="prizeList[index].name == '谢谢参与'">很遗憾</h1>
        <h1 v-else>恭喜您</h1>
        <p><img :src="prizeList[index].picture" alt="" /></p>
        <div v-if="prizeList[index].name == '谢谢参与'"></div>
        <template v-else>
          <h2>获得{{ prizeList[index].name }}</h2>
          <div class="btnsave" @click="adressClick" v-if="prize_type == 2">
            请填写收货地址,以便商家发送奖品
          </div>
          <div class="btnsave" @click="sinceClick" v-if="prize_type == 1">
            请联系商家,核销奖品
          </div>
        </template>

        <div
          class="btnsave"
          @click="continueClick"
          v-if="prizeList[index].name == '谢谢参与'"
        >
          继续抽奖
        </div>
      </div>
    </div>
    <div class="footer">
      <!-- 活动奖品列表 -->
      <InforPrizeList
        :activityItem="activityItem"
        :openid="openid"
        :prizeLists="prizeLists"
      ></InforPrizeList>
      <!-- 门店 -->
      <infor-mation :activityItem="activityItem"></infor-mation>
      <!-- 活动内容 -->
      <active-content :activityItem="activityItem"></active-content>

      <div class="coupons">
        <div class="title">
          <span></span>
          <div>参与群体</div>
          <span></span>
          <div class="triangle_left_border"></div>
          <div class="triangle_right_border"></div>
        </div>
        <div class="group">
          <div class="baberrage_fix">
            <sue-baberrage :browserList="browserList"></sue-baberrage>
          </div>
          <div class="group_one">浏览({{ visitList.length }})</div>
          <div class="group_two">
            <div class="group_active" v-for="(item, i) in visitList" :key="i">
              <van-image round width="40" height="40" :src="item.avatar" />
              <span style="margin-top: 8px; font-size: 1.5rem">{{
                item.nickname
              }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 助力排行 -->
      <infor-hlep
        :activityItem="activityItem"
        :openid="openid"
        :helpList="helpList"
      ></infor-hlep>
    </div>

    <!-- 滚动 -->
    <scroll-data
      v-if="scrollList.length != 0"
      :scrollList="scrollList"
    ></scroll-data>
    <!-- 创建活动 -->
    <CreateActivities
      v-if="activityItem.act_release == 1"
      @helpPlugChange="helpPlugChange"
    ></CreateActivities>

    <!-- 我的奖品 -->
    <AnimaTionprize @helpPlugChange="giftClick"></AnimaTionprize>

    <!-- 个人 -->
    <!-- <personal-nents
      @merchantsClick="merchantsClick"
      @ruelsClick="ruelsClick"
      @publishedClick="publishedClick"
      @giftClick="giftClick"
      :shows="false"
    ></personal-nents> -->

    <!-- 分享蒙版 -->
    <share-mask
      v-if="cancelShow"
      @shareChange="shareChange"
      @cancelChange="cancelChange"
    ></share-mask>

    <!-- 商家信息 merchants -->
    <!-- <van-popup
      class="vanPopup"
      v-model="merchantsShow"
      position="bottom"
      :style="{ height: '60%' }"
      round
    >
      <div class="gift_pop">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="merchantsShow = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div style="padding: 0 15px; width: 100%">
          <infor-mation :activityItem="activityItem"></infor-mation>
        </div>
      </div>
    </van-popup> -->

    <!-- 活动规则 -->
    <!-- <van-popup
      class="vanPopup"
      v-if="ruelsShow"
      v-model="ruelsShow"
      position="bottom"
      :style="{ height: '60%' }"
      round
    >
      <div class="gift_pop">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="ruelsShow = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div style="padding: 0 15px; width: 100%">
          <infor-ruels :activityItem="activityItem"></infor-ruels>
        </div>
      </div>
    </van-popup> -->
  </div>
</template>
<script>
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Image as VanImage,
  AddressEdit,
  AddressList,
  Overlay,
} from "vant";
import QRCode from "qrcode";
import html2canvas from "html2canvas";
import ScrollData from "@/components/ScrollData";
import PersonalNents from "@/components/PersonalNents";
import InforMation from "@/components/InforMation";
import InforRuels from "@/components/InforRuels";
import InforPrize from "@/components/InforPrize";
import InforPrizeList from "@/components/InforPrizeList";
import InforHlep from "@/components/InforHlep";
import MusicPlay from "@/components/MusicPlay";
import ShareMask from "@/components/ShareMask";
import ActiveContent from "@/components/ActiveContent";
import CreateActivities from "@/components/CreateActivities";
import SueBaberrage from "@/components/SueBaberrage";
import AnimaTionprize from "@/components/AnimaTionprize";
const imgsK1 = require("../../../assets/img/k1.png");
const imgsK2 = require("../../../assets/img/k2.png");

export default {
  name: "app",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [VanImage.name]: VanImage,
    [AddressEdit.name]: AddressEdit,
    [AddressList.name]: AddressList,
    [Overlay.name]: Overlay,
    ScrollData,
    PersonalNents,
    InforMation,
    InforRuels,
    InforPrize,
    InforHlep,
    MusicPlay,
    ShareMask,
    ActiveContent,
    SueBaberrage,
    InforPrizeList,
    CreateActivities,
    AnimaTionprize,
  },
  data() {
    return {
      isStart: 1,
      score: 10, //消耗积分
      index: 0, // 当前转动到哪个位置，起点位置
      count: 8, // 总共有多少个位置
      timer: 0, // 每次转动定时器
      speed: 200, // 初始转动速度
      times: 0, // 转动次数
      cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: -1, // 中奖位置
      click: true, //标识是否处于抽奖状态
      showToast: false, //显示中奖弹窗
      openid: "",
      activity_id: null,
      prizeList: [],
      draw: null,
      // 倒计时
      end_time: "",
      // 天时分秒
      dd: "00",
      hh: "00",
      mm: "00",
      ss: "00",
      activityItem: "",
      join_num: "",
      showPop: false,
      showImgPop: false,
      createLoading: false,
      theme_color: "",
      btn_color: "",
      prize_type: 0,
      order_id: "",
      sort: null,
      winningData: {},
      scrollList: [],
      merchantsShow: false,
      ruelsShow: false,
      showGift: false,
      showHlep: false,
      prizeLists: [],
      prizeListData: [],
      helpList: [],
      is_edit: 0,
      imgsK1: imgsK1,
      imgsK2: imgsK2,
      imgs: null,
      imgShow: false,
      timesImg: null,
      staff_id: null,
      domain: {},
      cancelShow: false,
      orderList: [],
      visitList: [],
      browserList: [],
    };
  },

  created() {
    this.activity_id = Number(this.$route.params.id);
    this.staff_id = this.$route.query.staff_id;
    this.getDomain();
    // console.log(this.$route.query.staff_id, 'this.$route.query.staff_id');
    // alert(this.staff_id)
    // document.title = "活动宝";
    this.timesImg = setInterval(() => {
      if (this.imgShow == false) {
        this.imgShow = true;
        this.imgs = imgsK1;
      } else if (this.imgShow == true) {
        this.imgShow = false;
        this.imgs = imgsK2;
      }
    }, 600);

    console.log(this.dd, this.hh, this.mm, this.ss);
  },

  destroyed() {
    //需要销毁
    clearInterval(this.timesImg);
  },

  mounted() {
    let time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(time);
      }
      this.timeDown();
    }, 500);
    // // 轮播滚动
    // let timeSet = setInterval(() => {
    //   if (this.flag == true) {
    //     clearInterval(timeSet);
    //   }
    //   this.timeScroll();
    // }, 2000);
    const _this = this;
    _this.activityItem = this.$store.state.activityItem;
    console.log("_this.activityItem_from_state", _this.activityItem);
    // 获取用户在后台管理系统中自定义的H5页面所显示的应用名称
    _this.ConfigItem();
  },

  methods: {
    getDomain() {
      const _this = this;
      if (process.env.NODE_ENV == "production") {
        _this.openid = localStorage.getItem("COPENID");
        if (
          _this.$route.query.openid &&
          _this.$route.query.openid != "undefined"
        ) {
          _this.openid = _this.$route.query.openid;
          localStorage.setItem("COPENID", _this.openid);
        }
      } else {
        _this.openid = _this.$store.state.openid;
      }
      let params = {};
      _this.$request.getDomain(params).then((res) => {
        if (res.ret == 200) {
          if (res.data.value.mainUrl && res.data.value.cannonUrl) {
            let domain = {
              mainUrl: res.data.value.mainUrl,
              cannonUrl: res.data.value.cannonUrl,
            };
            _this.domain = domain;

            console.log(
              "cannonUrl:" + location.href.indexOf(_this.domain.cannonUrl)
            );
            if (location.href.indexOf(_this.domain.cannonUrl) > -1) {
              _this.openid = _this.$route.query.openid;
              localStorage.setItem("COPENID", _this.openid);
              console.log("cannonUrl_this.openid", _this.openid);
            }
            //openid没拿到的时候
            if (!_this.openid || _this.openid == "undefined") {
              //当前为炮灰域名的时候
              if (location.href.indexOf(_this.domain.cannonUrl) > -1) {
                //跳转到主域名
                window.location.href = `${_this.domain.mainUrl}${
                  location.href.indexOf("addons") > -1
                    ? "/addons/youmi_activitys/public"
                    : ""
                }/plugin/index.html#/caseShow/scratchablelatex/activityShow/${Number(
                  _this.$route.params.id
                )}?staff_id=${_this.$route.query.staff_id}&p_openid=${
                  _this.$route.query.p_openid
                }`;
                return;
              }
            } else {
              _this.toCannonUrl();
            }
          }

          console.log("_this.openid:" + _this.openid);
          if (!_this.openid || _this.openid == "undefined") {
            _this.getWeixinConfig(); // 通过微信授权 获取 openID
          } else {
            _this.getActivityItem(); // 获取活动数据的同时会调用getOrderItem、shareInit函数是、
          }
        }
      });
    },
    toCannonUrl() {
      const _this = this;
      if (location.href.indexOf(_this.domain.mainUrl) > -1) {
        //跳转到炮灰域名
        window.location.href = `${_this.domain.cannonUrl}${
          location.href.indexOf("addons") > -1
            ? "/addons/youmi_activitys/public"
            : ""
        }/plugin/index.html#/caseShow/scratchablelatex/activityShow/${Number(
          _this.$route.params.id
        )}?staff_id=${_this.$route.query.staff_id}&p_openid=${
          _this.$route.query.p_openid
        }&openid=${_this.openid}`;
      }
    },
    // 分享按钮
    shareBtn1() {
      this.cancelShow = true;
    },
    // 取消按钮
    cancelChange() {
      this.cancelShow = false;
    },
    // 生成海报
    shareChange() {
      this.cancelShow = false;
      this.shareBtn();
    },
    // 跳转我也要发布活动
    helpPlugChange() {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html#/case/${this.activityItem.model}/${
        this.activityItem.id
      }?is_edit=${this.is_edit}&case_id=${this.activityItem.case_id}`;
    },
    // 商家信息
    merchantsClick() {
      this.merchantsShow = true;
    },
    // 活动规则
    ruelsClick() {
      this.ruelsShow = true;
    },
    // 助力排行
    publishedClick() {
      this.getHelpsList();
      this.showHlep = true;
    },
    // 奖品列表
    giftClick() {
      this.showGift = true;
    },
    // 查询浏览记录
    getPageVisit() {
      let params = { activity_id: this.activity_id };
      let list = [];
      this.$request.getPrizeHBTKvisit(params).then((res) => {
        this.visitLists = res.data;
        let data = [];
        this.visitLists.forEach((item, x) => {
          let obj = {};
          if (data.length >= 15) {
            return;
          } else {
            obj.id = x + 1;
            obj.avatar = item.avatar;
            obj.msg = "欢迎" + item.nickname + "进入活动";
            obj.time = x + 1;
            obj.barrageStyle = "normal";
            data.push(obj);
          }
        });
        this.browserList = data;
        console.log(this.browserList, "this.browserList---------");
        res.data.forEach((item, x) => {
          if (list.length >= 20) {
            return;
          } else list.push(item);
        });
        console.log(list, "getUpdateWriteoffgetUpdateWriteoff");
        this.visitList = list;
      });
    },
    // 好友助力排行
    getHelpsList() {
      let params = { activity_id: this.activity_id };
      this.$request.helpsList(params).then((res) => {
        let data = [];
        res.data.data.forEach((item) => {
          if (item.count != 0) {
            return data.push(item);
          }
        });
        let compare = function (obj1, obj2) {
          var val1 = parseFloat(obj1.count);
          var val2 = parseFloat(obj2.count);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        };
        let list = data.sort(compare).reverse().splice(0, 10);
        this.helpList = list;
        console.log(this.helpList, "this.helpList");
      });
    },
    // 查询奖品列表
    getPagePriz() {
      const _this = this;
      console.log("activity_id", _this.activity_id);
      const staff_id = _this.$route.query.staff_id;
      let params = { activity_id: _this.activity_id, openid: _this.openid };
      _this.$request.pagePrize(params).then((res) => {
        _this.prizeList = res.data.data;
        _this.end_time = res.data.end_time;
        _this.join_num = res.data.join_num;
        _this.draw = res.data.draw;
      });
    },
    // 我的奖品
    getPrizeList() {
      let params = { activity_id: this.activity_id, openid: this.openid };
      this.$request.prizeList(params).then((res) => {
        this.prizeLists = res.data.data;
        // console.log(this.prizeLists, "this.prizeLists");
      });
    },
    // 我的奖品
    getPrizeListData() {
      let params = { activity_id: this.activity_id };
      this.$request.prizeList(params).then((res) => {
        this.prizeListData = res.data.data;
        // console.log(this.prizeLists, "this.prizeLists");
      });
    },
    // 关闭按钮
    btnClick() {
      this.click = true;
      this.showToast = false;
    },
    // 跳到填写地址
    adressClick() {
      this.click = true;
      this.showToast = false;
      this.$store.commit("setprizeItem", this.winningData.yes);
      this.$store.commit("setThemeColor", this.activityItem.theme_color);
      this.$router.push(
        `/caseShow/envelopesTalk/AdressForm?order_id=${this.order_id}&activity_id=${this.activityItem.id}&oid=1`
      );
    },
    // 自提奖品
    sinceClick() {
      this.click = true;
      this.showToast = false;
    },
    // 继续抽奖
    continueClick() {
      this.click = true;
      this.showToast = false;
      this.startLottery();
    },
    // 抽中
    getscrollList(id) {
      let params = { activity_id: id };
      this.$request.scrollList(params).then((res) => {
        this.scrollList = res.data.data;
        this.$forceUpdate();
      });
    },
    //抽奖方法
    startLottery() {
      if (!this.click) {
        return;
      }
      this.click = true;
      if (this.click) {
        this.click = false;
        let params = { activity_id: this.activity_id, openid: this.openid };
        this.$request.doDraw(params).then((res) => {
          if (res.ret == 400) return this.$toast("活动还未开始,请开始后参与!");
          if (this.draw === 0)
            return this.$toast("抽奖次数不足，邀请好友增加抽奖参数");
          if (res.data == 1) return this.$toast("活动时间已结束");
          if (res.data == 2)
            return this.$toast("无法继续抽奖,您的总抽奖次数已达上限");
          if (res.data == 3) return this.$toast("抽奖次数不足");
          this.winningData = res.data;
          this.startRoll();
          this.getPrizeList();
          this.getPagePriz();
        });
      }
    },
    // 开始转动
    startRoll() {
      this.times += 1; // 转动次数
      this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
      if (this.times > this.cycle + 10 && this.prize === this.index) {
        clearTimeout(this.timer); // 清除转动定时器，停止转动
        this.prize = -1;
        this.times = 0;
        this.speed = 200;
        // this.click = true;
        var that = this;
        console.log(that.showToast, "that.showToast");
        setTimeout((res) => {
          that.showToast = true;
        }, 500);
      } else {
        if (this.times < this.cycle) {
          this.speed -= 10; // 加快转动速度
        } else if (this.times === this.cycle) {
          console.log(this.times, this.cycle);
          this.prize_type = this.winningData.prize_type;
          this.order_id = this.winningData.order_id;
          this.sort = this.winningData.sort;
          console.log(this.prize_type, this.order_id, this.sort);
          const index = this.sort - 1; // 随机获得一个中奖位置
          this.prize = index; //中奖位置,可由后台返回
          if (this.prize > 7) {
            this.prize = 7;
          }
        } else if (
          this.times > this.cycle + 10 &&
          ((this.prize === 0 && this.index === 7) ||
            this.prize === this.index + 1)
        ) {
          this.speed += 110;
        } else {
          this.speed += 20;
        }
        if (this.speed < 40) {
          this.speed = 40;
        }
        this.timer = setTimeout(this.startRoll, this.speed);
      }
    },

    // 每一次转动
    oneRoll() {
      let index = this.index; // 当前转动到哪个位置
      const count = this.count; // 总共有多少个位置
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      this.index = index;
    },

    // 倒计时
    timeDown() {
      const endTime = new Date(this.end_time).getTime();
      const nowTime = new Date(this.end_time);
      var date = new Date();
      var now = date.getTime(nowTime);
      //设置截止时间
      var endDate = new Date(endTime);
      var end = endDate.getTime();
      //时间差
      var rightTime = end - now; //截止时间减去当前时间
      if (rightTime > 0) {
        //判断剩余倒计时时间如果大于0就执行倒计时否则就结束
        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        this.dd = dd > 9 ? dd : "0" + dd;
        this.hh = hh > 9 ? hh : "0" + hh;
        this.mm = mm > 9 ? mm : "0" + mm;
        this.ss = ss > 9 ? ss : "0" + ss;
        // console.log(this.dd, this.hh , this.mm , this.ss);
        if (
          this.dd == "00" &&
          this.hh == "00" &&
          this.mm == "00" &&
          this.ss == "00"
        ) {
          return (this.isStart = 2);
        }
      } else {
        this.isfail = true;
      }
    },

    // 分享
    helpTimes(activityItem) {
      const _this = this;
      // console.log("_this.$route.query.p_openid", _this.$route.query.p_openid);
      const p_openid = _this.$route.query.p_openid;
      // alert(p_openid)
      if (p_openid) {
        let params = {
          activity_id: activityItem.id,
          openid: _this.openid,
          p_openid: p_openid,
        };
        _this.$request.receivingHelp(params).then((res) => {
          // console.log(res, 'JSON.stringify(params)');
          // alert(JSON.stringify(params))
        });
      }
    },

    ConfigItem() {
      const _this = this;
      let params = {};
      _this.$request.ConfigItem(params).then((res) => {
        _this.config = res.data.value;
        console.log("_this.config", _this.config);
      });
    },
    shareInit(activityItem) {
      const _this = this;
      const url = location.href.split("#")[0];
      let params = {
        url: url,
      };
      _this.$request.configJssdk(params).then((res) => {
        wx.config({
          debug: false, // 是否开启调试模式
          appId: res.data.appId, //appid
          timestamp: res.data.timestamp, // 时间戳
          nonceStr: res.data.nonceStr, // 随机字符串
          signature: res.data.signature, // 签名
          jsApiList: [
            "checkJsApi",
            "updateAppMessageShareData",
            "updateTimelineShareData",
          ], // 需要使用的JS接口列表
        });
        let href = `${location.protocol}//${location.hostname}${
          location.href.indexOf("addons") > -1
            ? "/addons/youmi_activitys/public"
            : ""
        }/plugin/index.html#/caseShow/${activityItem.model}/activityShow/${
          activityItem.id
        }?staff_id=${_this.staff_id}&p_openid=${_this.openid}`;
        wx.updateAppMessageShareData({
          title: activityItem.sharetitle,
          desc: activityItem.share_describe, // 分享描述
          link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: activityItem.shareimg, // 分享图标
          success: function () {
            // 设置成功
          },
          fail: function (error) {
            // alert(JSON.stringify(error) )
          },
        });
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）这个是不支持加入描述的要注意一下
        wx.updateTimelineShareData({
          title: activityItem.sharetitle, // 这是分享展示卡片的标题
          desc: activityItem.share_describe, // 分享描述
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: activityItem.shareimg, // 分享图标
          success: function (ress) {
            // 设置成功
          },
          fail: function (error) {},
        });
        wx.error(function (error) {});
      });
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    shareBtn() {
      this.toTop();
      const _this = this;
      if (_this.activityItem.status == 2) return _this.$toast("活动已结束");
      let params1 = {
        id: _this.activity_id,
      };
      _this.$request.getActivityItembase64(params1).then((res) => {
        // console.log(res.data, 'res.data');
        _this.copyimg = res.data;
      });
      let params = { activity_id: _this.activity_id, openid: _this.openid };
      this.$request.itemsHelp(params).then((res) => {
        if (res.data === 1)
          return _this.$toast("无法继续分享,您的总抽奖次数已达上限");
        if (res.data === 2)
          return _this.$toast("今日助力次数已使用完,请明天继续");
        _this.showPop = true;
        _this.$nextTick(function () {
          _this.createQrcode();
        });
      });
    },
    createPoster() {
      // 生成海报
      const _this = this;
      const vm = this;
      vm.createLoading = true;
      const domObj = document.getElementById("posterHtml");
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: true,
        logging: true,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector("#posterHtml");
          e.style.display = "block";
        },
      }).then(function (canvas) {
        // 在微信里,可长按保存或转发
        // let url = canvas.toDataURL('image/png')
        // const a = document.createElement('a'); // 创建a标签
        // a.setAttribute('download', `${new Date().getTime()}.png`);// download属性
        // a.setAttribute('href', url);// href链接
        // a.click();// 自执行点击事件
        let url = canvas.toDataURL("image/png");
        vm.createImg = url;
        vm.showImgPop = true;
        vm.createLoading = false;
        vm.showPop = false;
      });
    },
    createQrcode() {
      const _this = this;

      let href = `${location.protocol}//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/plugin/index.html#/caseShow/${_this.activityItem.model}/activityShow/${
        _this.activityItem.id
      }?staff_id=${_this.staff_id}&p_openid=${_this.openid}`;

      console.log(href, "hrefhref生成二维码链接");
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          console.log(error);
        } else {
          canvas.style.width = "12rem";
          canvas.style.height = "12rem";
          // _this.createPoster();
        }
      });
    },
    getOrderItem() {
      const _this = this;
      let params = {
        openid: localStorage.getItem("COPENID"),
        activity_id: _this.activityItem.id,
      };
      _this.$request.getOrderItem(params).then((res) => {
        console.log(res, "setOrderItem");
        _this.$store.commit("setOrderItem", res.data);
        // 默认
        if (res.data.val && res.data.val != null) {
          _this.is_apply = true;
        }
        if (res.data.val && res.data.val.length > 0) {
          _this.is_apply = true;
        }
      });
    },
    getWeixinConfig() {
      const _this = this;
      let params = {};
      _this.$request.getWeixinConfig(params).then((res) => {
        _this.$store.commit("setAppid", res.data.value.appid);
        _this.$store.commit("setSecret", res.data.value.secret);
        //_this.getCode(res.data.value.appid)
        if (process.env.NODE_ENV == "production") {
          _this.getCode(res.data.value.appid);
        } else {
          if (!_this.activityItem) {
            _this.getActivityItem();
          }
        }
      });
    },
    getCode(appid) {
      // 非静默授权，第一次有弹框
      const _this = this;
      const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      const local = window.location.href;
      if (code == null || code === "") {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          appid +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        _this.$store.commit("setCode", code);
        _this.getOpenId(code); //把code传给后台获取用户信息
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getFansItem(item) {
      console.log("fansItem:", item);
      const _this = this;
      let params = {
        openid: item.openid || localStorage.getItem("COPENID"),
        nickname: item.nickname,
        name: item.nickname,
        avatar: item.avatar,
        province: item.province,
        city: item.city,
      };
      console.log("item.openid", item.openid);
      console.log("fansItem:", item);
      _this.$request.getFansItem(params).then((res) => {
        // 默认
        // _this.getOrderItem();
      });
    },
    getOpenId(code) {
      const _this = this;
      let params = {
        appid: _this.$store.state.appid,
        secret: _this.$store.state.secret,
        code: code,
      };
      _this.$request.getOpenid(params).then((res) => {
        const userInfo = res.data[0];
        const openid = userInfo.openid;
        _this.openid = openid;
        const nickname = userInfo.nickname;
        const headimgurl = userInfo.headimgurl;
        const province = userInfo.province;
        const city = userInfo.city;
        // const headimgurl = userInfo["headimgurl"];
        // const headimgurl = userInfo["headimgurl"];
        // const unionid = res.data.unionid;
        _this.$store.commit("setOpenid", openid);
        localStorage.setItem("COPENID", openid);
        const item = {
          openid,
          nickname,
          avatar: headimgurl,
          province,
          city,
          name: nickname,
        };
        _this.$store.commit("setUserInfo", item);
        localStorage.setItem("USERINFO", JSON.stringify(item));
        _this.getFansItem(item);
        _this.getActivityItem();
        _this.toCannonUrl();
      });
    },
    judgeIsApply() {
      const _this = this;
      const apply_list = _this.activityItem.apply_list;
      // _this.openid = "111"
      const isApply = apply_list.some((res) => res.openid == _this.openid);
      this.activityItem.is_apply = isApply;
    },
    getActivityItem() {
      console.log("_this.getActivityItem", 1231230);
      const _this = this;
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        id: Number(_this.$route.params.id),
        openid: localStorage.getItem("COPENID"),
      };
      _this.$request.getActivityItem(params).then((res) => {
        let data = res.data;
        // data.btn_color = data.theme_color
        _this.activityItem = data;
        console.log(_this.activityItem, "_this.activityItem");
        _this.theme_color = res.data.theme_color;
        _this.btn_color = res.data.btn_color;
        console.log(_this.theme_color, "_this.theme_color ");
        document.title = _this.activityItem.title;
        if (_this.activityItem) {
          // const item = JSON.parse(localStorage.getItem("USERINFO"))
          // if(item) {
          //   _this.getFansItem(item)
          // }
          // _this.getOrderItem(); // 获取订单数据

          _this.getPagePriz();
          _this.getPrizeList();
          _this.getPrizeListData();
          _this.getHelpsList();
          _this.getPageVisit();
          _this.getPagePriz();
          document.title = _this.activityItem.title;
          _this.getscrollList(_this.activityItem.id);
          _this.shareInit(_this.activityItem); // 调用微信分享的API
          _this.helpTimes(_this.activityItem);
          _this.loadingSkeleton = false;
        }
        _this.$store.commit("setActivityItem", _this.activityItem);
        // document.title = _this.activityItem.title;
        toast.clear();
      });
    },
    toCaseView() {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html`;
    },
    toView(to) {
      if (to == "applyTrue") {
        this.$router.push(`/caseShow/applyActivity/applyPZ`);
      } else {
        this.$router.push(`/caseShow/applyActivity/applyForm`);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.active_cont {
  background-color: #ff8d90;
  #app {
    // // background: radial-gradient(49% 160%,#e64d4d  0, #df0808 100%);
    padding-bottom: 24px;
    background: url("../../../assets/img/bg5.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 1.4rem;
    // overflow: hidden;
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    box-sizing: border-box;
    .imgFirst {
      display: inline-block;
      width: 100%;
      margin-bottom: 24px;
      // height: 17rem;
    }
    .activyshow_data {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      height: 2.4rem;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #fff;
      font-size: 1.2rem;
      // border-radius: 2.4rem;
      border-radius: 0 0 50% 50%;
      z-index: 88;
      div {
        display: flex;
        align-items: center;
        .icon_btn {
          color: var(--btn_color);
          margin-right: 5px;
          font-size: 1.4rem;
        }
      }
    }
    /* margin-top: 6rem; */
    .up {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 0 10px;
      // height: 5rem;
      .title {
        word-wrap: break-word;
        word-break: normal;
        width: 70%;
        padding: 0.2rem 0;
        background-color: var(--btn_color);
        border-radius: 10px;
        line-height: 1.7rem;
        text-align: center;
        color: #fff;
        font-size: 1.4rem;
        margin-bottom: 0.3rem;
        letter-spacing: 0.3rem;
      }
      .text {
        font-size: 1.2rem;
        color: #fff;
        .shu {
          margin: 0 8px;
        }
      }
      .times {
        font-size: 1.2rem;
        margin: 0.6rem 0;
        // color: #fddf43;
        :first-child {
          margin-right: 12px;
        }
      }
      .number_of {
        margin-bottom: 0.3rem;
        color: #fddf43;
      }
    }
    .btn_pop {
      position: absolute;
      top: 21rem;
      left: 50%;
      z-index: 20;
      transform: translateX(-53%);
      .release_btn1 {
        display: inline-block;
        width: 16rem;
        height: 3rem;
        background-color: var(--btn_color);
        // margin-right: 15px;
        border-radius: 8px;
        font-size: 1.2rem;
        letter-spacing: 0.5rem;
        color: #fff;
        border: 0;
      }
    }
    .show {
      height: auto;
      background-color: white;
      position: relative;
      .close-icon {
        position: absolute;
        width: 2.4rem;
        height: 2.4rem;
        right: 0.7rem;
        top: 0.7rem;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      img {
        width: 100%;
      }
      .posterHtml {
        // display: flex;
        #coverImg {
          display: flex;
          width: 100%;
          max-height: 30rem;
          object-fit: cover;
        }
        .imgBox {
          width: 100%;
        }
        .content {
          padding: 1.2rem;
          display: flex;
          height: 14rem;
          justify-content: space-between;
          .desc {
            word-wrap: break-word;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 100%;
            .line1 {
              font-size: 2rem;
              font-weight: bold;
              color: #333;
              display: flex;
              align-items: center;
            }
            .line2 {
              font-size: 2.2rem;
              font-weight: 900;
              color: #111;
              // overflow: hidden;
              // text-overflow: ellipsis;
              // display: -webkit-box;
              // -webkit-line-clamp:2; /* 设置行数 */
              // -webkit-box-orient:vertical;
            }
          }
          .qrcode {
          }
        }
        .bottom-box {
          padding-bottom: 2rem;
          padding-left: 1.2rem;
          padding-right: 1.2rem;
        }
      }
    }
    .imgBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba($color: #000000, $alpha: 0.98);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      img {
        width: 100%;
      }
      .tips {
        color: white;
      }
      .close-icon {
        position: fixed;
        width: 2.4rem;
        height: 2.4rem;
        right: 0.7rem;
        top: 0.7rem;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3002;
      }
    }

    .vanPopup {
      box-sizing: border-box;
      background-color: var(--theme_color);
      overflow: hidden;
      .gift_pop {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        background-color: white;
        position: relative;
        padding: 2rem 0;
        background-color: var(--theme_color);
        .close-icon {
          position: fixed;

          width: 2.4rem;
          height: 2.4rem;
          right: 0.7rem;
          bottom: 55%;
          border-radius: 1.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;
        }
      }
    }

    .fix-bottom {
      display: flex;
      overflow: hidden;
      position: fixed;
      bottom: 1rem;
      left: 50%;
      right: 0;
      width: 100%;
      transform: translateX(-48%);
      z-index: 20;
      box-sizing: border-box;
    }

    .dwon_btn {
      .release_btn1 {
        background-color: var(--btn_color);
        margin-right: 15px;
        border-radius: 8px;
        font-size: 1.2rem;
        letter-spacing: 0.5rem;
        color: #fff;
        border: 0;
      }
    }
  }

  .footer {
    margin: 0 auto;
    background-color: #ff8d90;
    min-height: 100%;
    font-size: 1.2rem;
    box-sizing: border-box;
    padding: 0 15px 5rem;
    .coupons {
      margin-top: 3.5rem;
      // width: 90%;
      background-color: #fff;
      border-radius: 8px;
      padding: 1.5rem 1rem 1rem;
      box-sizing: border-box;
      position: relative;

      .title {
        width: 12rem;
        height: 3rem;
        background: var(--btn_color);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        line-height: 3rem;
        text-align: center;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        letter-spacing: 0.3rem;
        font-size: 1.4rem;
        span {
          display: inline-block;
          width: 1rem;
          height: 1rem;
          border-radius: 1rem;
          background-color: #ffdb89;
        }
        span:nth-child(1) {
          margin-right: 0.5rem;
        }
        span:nth-child(2) {
          margin-left: 0.2rem;
        }
        .triangle_left_border {
          width: 0;
          height: 0;
          border-bottom: 1.5rem solid var(--btn_color);
          border-left: 1.5rem solid transparent;
          position: absolute;
          left: 0%;
          top: 0%;
          margin-left: -1.5rem;
        }
        .triangle_right_border {
          width: 0;
          height: 0;
          border-bottom: 1.5rem solid var(--btn_color);
          border-right: 1.5rem solid transparent;
          position: absolute;
          left: 100%;
          top: 0%;
        }
      }

      // 参与群体
      .group {
        margin-top: 1rem;
        .baberrage_fix {
          background: 15px;
          background-color: #ff8d90;
          // position: fixed;
        }
        .group_one {
          margin-bottom: 1rem;
          font-size: 2rem;
        }
        .group_two {
          display: flex;
          justify-content: space-around;
          flex-direction: row;
          flex-wrap: wrap;
          .group_active {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 20%;
            margin-bottom: 10px;
            span {
              width: 100%;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .group_three {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 2.5rem;
          // margin-bottom: 2.5rem;
          .conter_group_one {
            display: flex;
            align-items: center;
            .max {
              display: flex;
              flex-direction: column;
              margin-left: 10px;
              font-size: 1.6rem;
            }
          }
          .conter_group_two {
            display: flex;
            flex-direction: column;
            text-align: right;
            font-size: 1.6rem;
            color: #999;
          }
        }
      }
    }
  }
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

img {
  border: 0px;
}

ul,
li {
  list-style-type: none;
}

// .lottery-box {
//   overflow: hidden;
// }

// .lottery-box .title {
//   text-align: center;
//   padding: 5rem 0;
//   font-size: 1.8rem;
//   color: #fff;
// }

.lottery {
  box-sizing: border-box;
  animation: changeBg 0.6s ease infinite;
  overflow: hidden;
  padding: 2rem;
  width: 25rem;
  margin: 0 auto;
  height: 26rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 1rem;
}

// @keyframes changeBg {
//   0% {
//     background-image: url('../../../assets/img/k1.png');
//   }

//   100% {
//     background-image: url('../../../assets/img/k2.png');
//   }
// }

.lottery .lottery-item {
  height: 25rem;
  position: relative;
  margin-top: 0.5rem;
  margin-left: 0.2rem;
}

.lottery .lottery-item ul li {
  width: 33.33333333%;
  position: absolute;
  padding-right: 0.3rem;
}

.lottery .lottery-item ul li:nth-child(2) {
  left: 33.33333333%;
}

.lottery .lottery-item ul li:nth-child(3) {
  left: 66.66666666%;
}

.lottery .lottery-item ul li:nth-child(4) {
  left: 66.66666666%;
  top: 7rem;
}

.lottery .lottery-item ul li:nth-child(5) {
  left: 66.66666666%;
  top: 14rem;
}

.lottery .lottery-item ul li:nth-child(6) {
  left: 33.33333333%;
  top: 14rem;
}

.lottery .lottery-item ul li:nth-child(7) {
  left: 0;
  top: 14rem;
}

.lottery .lottery-item ul li:nth-child(8) {
  left: 0;
  top: 7rem;
}

.lottery .lottery-item ul li .box {
  height: 6.7rem;
  position: relative;
  text-align: center;
  overflow: hidden;
  background: url("../../../assets/img/bg2.png") no-repeat center;
  background-size: 100% 100%;
}

.lottery .lottery-item ul li .box div {
  overflow: hidden;
  padding: 0 0.5rem;
}

.lottery .lottery-item ul li .box div img {
  overflow: hidden;
  display: block;
  width: rem;
  height: 3.6rem;
  // margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.lottery .lottery-item ul li .box .name {
  width: 70px !important;
  color: #708abf;
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  font-size: 0.8rem;
  margin-top: -0.2rem;
  // display: flex;
  // align-items: center;
  // justify-content: space-around;
  // text-align: center;
  // margin-left: 3px;
}
.lottery .lottery-item ul li .box .name span {
  font-size: 0.8rem;
  // transform: scale(0.8);
  display: inline-block;
  white-space: nowrap;
}

.lottery .lottery-item ul li.on .box {
  background: url("../../../assets/img/bg1.png") no-repeat center;
  background-size: 100% 100%;
}

.lottery .lottery-item ul li.on .box p {
  color: #fff;
}

.lottery .lottery-item .lottery-start {
  position: absolute;
  left: 33.33333333%;
  width: 33.33333333%;
  top: 7rem;
  padding-right: 4px;
}

.lottery .lottery-item .lottery-start .box {
  height: 6.7rem;
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.lottery .lottery-item .lottery-start .box div {
  width: 100%;
  height: 100%;
  background: url("../../../assets/img/bg4.png") no-repeat center;
  background-size: 100% 100%;
}

.lottery .lottery-item .lottery-start .box p b {
  font-size: 2rem;
  margin-top: 2rem;
  margin-bottom: 1.2rem;
  line-height: 2rem;
  display: block;
}

.lottery .lottery-item .lottery-start .box:active {
  opacity: 0.7;
}

.lottery .lottery-item .lottery-start .box.gray {
  background: url("../../../assets/img/bg3.png") no-repeat center;
  background-size: 100% 100%;
}

.lottery .lottery-item .lottery-start .box.gray p {
  color: #708abf;
  font-weight: bold;
  line-height: 6rem;
  font-size: 1.3rem;
  word-wrap: break-word;
  word-break: normal;
}

.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  overflow: hidden;
  z-index: 222;
  top: 0;
  left: 0;
}

.lottery-alert {
  max-width: 40rem;
  text-align: center;
  z-index: 10000;
  border-radius: 1rem;
  background: #fff;
  padding: 2rem;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto 2rem;
  top: 50%;
  transform: translateY(-50%);
  .close-icon {
    position: fixed;
    width: 2.4rem;
    height: 2.4rem;
    right: 0.7rem;
    top: 0.7rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3002;
  }
}

.lottery-alert h1 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #d92b2f;
}

.lottery-alert img {
  display: block;
  margin: 0 auto;
}

.lottery-alert h2 {
  font-weight: normal;
  color: #d92b2f;
  font-size: 1.5rem;
  padding-top: 1.5rem;
}

.lottery-alert p {
  color: #666;
  font-size: 1.6rem;
  padding-top: 0.5rem;
}

.lottery-alert .btnsave {
  border-radius: 0.3rem;
  box-shadow: none;
  height: 4rem;
  cursor: pointer;
  line-height: 4rem;
  color: #fff;
  margin-top: 1.2rem;
  background: var(--btn_color);
  font-size: 1.6rem;
}
</style>